<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="120px">

      <el-form-item label="执行方式">
        <el-select v-model="form.client" placeholder="选择执行方式">
          <el-option label="Local" value="local" />
          <el-option label="Run" value="run" />
        </el-select>
      </el-form-item>
      <el-form-item label="执行目标">
        <el-input v-model="form.tgt" />
      </el-form-item>
      <el-form-item label="执行任务">
        <el-input v-model="form.fun" />
      </el-form-item>

      <el-form-item label="参数">
        <el-input v-model="form.desc" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">执行</el-button>
        <el-button @click="onCancel">Cancel</el-button>
      </el-form-item>
    </el-form>
    <div >
      <pre>{{ form }}</pre>
      
      <pre>{{ result }}</pre>
    </div>
  </div>
</template>

<script>
import {execFunc} from '@/api/salt'
export default {
  data() {
    return {
      form: {
        client: '',
        tgt: '',
        fun: '',
      },
      result: null
    }
  },
  methods: {
    onSubmit() {
      this.$message('submit!')
      execFunc(this.form).then(response => {
        var resp = response.data
        this.result=resp
      })
      
    },
    onCancel() {
      this.$message({
        message: 'cancel!',
        type: 'warning'
      })
    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }
</style>

